<template>
  <view class="home">
    <view class="home-box">
      <!-- 头部 -->
      <view class="headers" :style="{ paddingTop: menuButtonT + 'px', width: '100%', height: customBarH + 'px' }">
        <view class="imgs" style="padding: 0 20rpx 0 40rpx">
          <image class="image1" mode="widthFix" src="http://cdn.jxsr.com/logox.png" />
        </view>
        <view
          class="inps"
          style="-webkit-flex: 1; flex: 1"
          :style="{ marginRight: customBarlef + customBarrig + 'px' }">
          <view class="inputs" @click="search">
            <image class="img" mode="widthFix" src="http://cdn.jxsr.com/search.png" />
            <view class="inp_vie">搜索</view>
          </view>
        </view>
      </view>
      <!-- 分类 -->
      <view class="conts" :style="{ marginTop: customBarH + menuButtonT + 10 + 'px' }">
        <swiper class="swiper" :autoplay="true" :duration="3000">
          <swiper-item v-for="(item, index) in slideshowData" :key="index">
            <image class="swiper-item" mode="widthFix" :src="item.image" />
          </swiper-item>
        </swiper>

        <!-- 分类 -->
        <view class="classifys" v-if="classifysData.length != 0">
          <view class="ifys" v-for="(item, index) in classifysData" :key="index" @click="classifysClick(item)">
            <image style="background-color: #eeeeee; border-radius: 50%" mode="aspectFill" :src="item.image" />
            <text>{{ item.cateName }}</text>
          </view>
        </view>
      </view>
      <!-- 商品展示 -->
      <view class="tenant">
        <scroll-view class="scroll-view_subclass" scroll-x="true">
          <view class="subclass">
            <view class="subclass_li" :class="{ vis_actis: typeId === 0 }" @click.stop="subclass(0, { id: 0 })">
              特价商品
              <view v-if="typeId === 0" class="tbs"></view>
            </view>
          </view>
        </scroll-view>
        <view class="lists">
          <view class="list_li" v-for="(item, index) in listData" :key="index" @tap="navigateTo(item.id)">
            <image class="li_img" mode="aspectFill" :src="item.image" />
            <view class="shop_xx">
              <view class="name">
                {{ item.name }}
              </view>
              <view class="jg">
                <span class="sp1"
                  >¥<span>{{ item.vipPrice }}</span
                  >/{{ item.size ? item.size : '斤' }}</span
                >
                <span class="sp2">特价</span>
              </view>
            </view>
          </view>
        </view>
        <view class="list_bots" v-if="showLoadMore">{{ loadMoreText }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import { findHomeVideo, queryAll, queryAllTwo, querySpecialOffers, versionComparison } from '@/utils/api.js';
  export default {
    onShow: function () {
      this.memberData = uni.getStorageSync('zhgx_ports');
    },
    data() {
      return {
        statursBarH: getApp().globalData.statursBarH,
        customBarH: getApp().globalData.customBarH,
        menuButtonT: getApp().globalData.menuButtonT,
        customBarlef: getApp().globalData.customBarlef,
        customBarrig: getApp().globalData.customBarrig,

        // 当前端
        memberData: 'mj',
        // 搜索值
        value: '',

        // 轮播参数
        indicatorDots: true,
        autoplay: true,
        interval: 3000,
        duration: 1000,
        // 轮播图数据
        slideshowData: [],
        // 点击图片数据
        previewImageData: [],
        // 切换分类id
        subclassIndex: 0,
        typeId: 0,
        // 分类数据
        classifysData: [],
        // 列表数据
        listData: [],
        loadMoreText: '加载中...',
        showLoadMore: false,
        // 最大值
        max: 10,
        // 页数
        current: 1,
        // 每页数量
        pageSize: 10,

        // 更新
        updateLink: null, //更新包的链接
        upDateContent: null, //更新内容
        wgtVer: null,
        version: null,
        widgetInfo: null,
      };
    },
    onLoad() {
      this.memberData = uni.getStorageSync('zhgx_ports');
      // 获取分类
      this.slideShow();
      // 获取轮播图
      this.getLbt();
      // 获取商品
      this.initData();
    },
    // 监听页面卸载
    onUnload() {
      (this.max = 0), (this.listData = []), (this.loadMoreText = '加载更多'), (this.showLoadMore = false);
      (this.current = 1), (this.pageSize = 10);
    },
    // 页面滚动到底部的事件
    onReachBottom() {
      if (this.loadMoreText == '没有更多商品了!') {
        this.loadMoreText = '没有更多商品了!';
        return;
      }
      this.showLoadMore = true;
      this.current += 1;
      setTimeout(() => {
        this.setListData();
      }, 300);
    },
    // 监听用户下拉动作，一般用于下拉刷新
    onPullDownRefresh() {
      if (this.memberData == 'mj') {
        (this.max = 5), (this.listData = []), (this.loadMoreText = '加载更多'), (this.showLoadMore = false);
        (this.current = 1), (this.pageSize = 10);
        this.initData();
        if (this.typeId === 0) {
          this.getLbt();
        }
      }
    },
    methods: {
      // 获取数据
      slideShow() {
        // 获取分类
        queryAllTwo({})
          .then((res) => {
            if (res.code === 200) {
              this.classifysData = res.data.categories;
            } else {
              uni.showToast({ title: '请求错误', position: 'bottom', icon: 'none' });
            }
          })
          .catch((err) => {
            uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
          });
      },

      // 获取轮播图
      getLbt() {
        // 获取轮播图数据
        queryAll({})
          .then((res) => {
            console.log('%c [ res ]-179', 'font-size:13px; background:pink; color:#bf2c9f;', res);
            uni.stopPullDownRefresh();
            if (res.code === 200) {
              this.slideshowData = res.data.banners;
            } else {
              uni.showToast({ title: '请求错误', position: 'bottom' });
            }
          })
          .catch((err) => {
            uni.stopPullDownRefresh();
            uni.showToast({ title: '网络繁忙', position: 'bottom' });
          });
      },
      //预览轮播图
      previewImage(index) {
        var img = this.previewImageData; //获取当前页面的轮播图数据
        //uniapp预览轮播图
        uni.previewImage({
          current: index, //预览图片的下标
          urls: img, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
        });
      },

      // 获取列表数据
      initData() {
        // 获取店铺数据
        querySpecialOffers({
          pageNum: this.current,
          pageSize: this.pageSize,
          isBenefit: 1,
        })
          .then((res) => {
            if (res.code === 200) {
              this.listData = res.data.products;
              if (this.listData.length < 10) {
                this.showLoadMore = true;
                this.loadMoreText = '没有更多商品了!';
              }
              uni.stopPullDownRefresh();
            } else {
              uni.showToast({ title: '请求错误', position: 'bottom', icon: 'none' });
            }
          })
          .catch((err) => {
            uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
          });
      },
      // 下拉加载数据
      setListData() {
        let data = [];
        // 获取店铺数据
        querySpecialOffers({
          current: this.current,
          pageSize: this.pageSize,
          typeId: this.typeId,
        })
          .then((res) => {
            if (res.code === 200) {
              data = res.data;
              if (data.length == 0) {
                this.current -= 1;
                this.showLoadMore = true;
                this.loadMoreText = '没有更多商品了!';
                return;
              } else if (data.length < 10) {
                this.showLoadMore = true;
                this.loadMoreText = '没有更多商品了!';
              }
              this.listData = this.listData.concat(data);
            } else {
              uni.showToast({ title: '请求错误', position: 'bottom', icon: 'none' });
            }
          })
          .catch((err) => {
            uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
          });
      },

      // 分类选择
      subclass(index, item) {
        this.subclassIndex = index;
        this.typeId = item.id;
        (this.max = 120), (this.listData = []), (this.loadMoreText = '加载更多'), (this.showLoadMore = false);
        (this.current = 1), (this.pageSize = 10);
        this.initData();
      },
      // 查看商品详情
      navigateTo(id) {
        uni.navigateTo({
          url: '/pages/goods/detail?id=' + id + '&sptype=ordinarysp',
        });
      },
      // 进入搜索
      search() {
        uni.navigateTo({
          url: '/pages/search/search',
        });
      },
      // 分类跳转
      classifysClick() {
        uni.switchTab({
          url: '../classify/classify',
        });
      },

      // 点击全屏播放
      spss(videoLists, index) {
        uni.navigateTo({
          url: `/pages/base/videoList/videoList?index=${index}&videoListAll=${encodeURIComponent(
            JSON.stringify(videoLists)
          )}`,
        });
      },

      // 获取当前版本号
      plusReady() {
        var that = this;
        // 获取本地应用资源版本号
        plus.runtime.getProperty(plus.runtime.appid, function (inf) {
          that.widgetInfo = inf;
          that.wgtVer = inf.version; //获取当前版本号
          that.version = plus.runtime.version;
          that.versionComparison(that.wgtVer);
        });
      },
      // 版本对比
      versionComparison(wgtVer) {
        let that = this;
        versionComparison({
          versionNo: wgtVer,
        })
          .then((res) => {
            if (res.code === 200) {
              that.updateLink = res.data.editionUrl;
              uni.showModal({
                content: '发现新版本，请更新！',
                confirmText: '确定',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    // 检查是否安卓
                    uni.getSystemInfo({
                      success: (res) => {
                        if (res.platform == 'android') {
                          // if(plus.networkinfo.getCurrentType()!=3){
                          //     uni.showToast({
                          //         title: '有新的版本发布，检测到您目前非Wifi连接，为节约您的流量，程序已停止自动更新，将在您连接WIFI之后重新检测更新。',
                          //         // title: '检测到您目前非Wifi连接，请注意浏览消耗。',
                          // 		mask: false,
                          //         duration: 5000,
                          //         icon:"none"
                          //     });
                          //     return;
                          // }
                          that.doUpData();
                        }
                      },
                    });
                  } else if (res.cancel) {
                    if (uni.getSystemInfoSync().platform == 'android') {
                      plus.runtime.quit();
                    }
                  }
                },
              });
            } else {
              // uni.showToast({title:res.message, position: 'bottom'})
            }
          })
          .catch((err) => {
            uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
          });
      },
      // 更新安装
      doUpData() {
        uni.showLoading({
          title: '更新中……',
          mask: true,
        });
        uni.downloadFile({
          //执行下载
          url: this.updateLink, //下载地址
          success: (downloadResult) => {
            //下载成功
            uni.hideLoading();
            if (downloadResult.statusCode == 200) {
              uni.showModal({
                content: '更新成功，请确认重启安装',
                confirmText: '确定',
                showCancel: false,
                success: function (res) {
                  if (res.confirm == true) {
                    plus.runtime.install(
                      downloadResult.tempFilePath,
                      {},
                      function () {
                        plus.nativeUI.closeWaiting();
                        plus.nativeUI.alert('更新成功，重启中！', function () {
                          plus.runtime.restart();
                        });
                      },
                      function (e) {
                        plus.nativeUI.closeWaiting();
                        plus.nativeUI.alert('安装更新文件失败[' + e.code + ']：' + e.message);
                        if (e.code == 10) {
                          alert('请清除临时目录');
                        }
                      }
                    );
                  }
                },
                fail: (err) => {
                  uni.showToast({ title: '下载失败', position: 'bottom', icon: 'none' });
                  if (uni.getSystemInfoSync().platform == 'android') {
                    plus.runtime.quit();
                  }
                },
              });
            }
          },
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  .home {
    height: 100%;

    .swiper-item {
      width: 715rpx;
      margin-left: 17.5rpx;
    }

    .home-box {
      // position: relative;
      // touch-action: none;
      // 头部
      .headers {
        // height: 100rpx;
        width: 100%;
        background-color: $backgroundColor;
        // padding-top: 60rpx;
        padding-bottom: 20rpx;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        display: flex;

        .imgs {
          display: flex;
          justify-content: center;
          align-items: center;

          .image1 {
            width: 156rpx;
            height: 40rpx;
          }

          .image2 {
            width: 66rpx;
            height: 60rpx;
          }
        }

        .inps {
          padding-right: 40rpx;
          display: flex;
          align-items: center;

          .inputs {
            width: 100%;
            height: 60rpx;
            border-radius: 92rpx;
            border: 2rpx solid $primaryTextColor;
            background-color: #fff;
            display: flex;
            align-items: center;

            .img {
              width: 30rpx;
              height: 32rpx;
              margin-left: 20rpx;
            }

            .inp_vie {
              font-size: 32rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              margin-left: 20rpx;
            }
          }
        }
      }

      // 轮播、分类
      .conts {
        width: 100%;
        padding: 20px 0;
        // height: 240px;
        // padding-top: 160rpx;
        background-color: $backgroundColor;

        // 分类
        .classifys {
          width: 90%;
          margin: 0 auto;
          margin-bottom: 20px;
          // height: 100px;
          padding: 20rpx 20rpx;
          display: flex;
          flex-wrap: wrap;
          background-color: #fff;
          border-radius: 0px;

          // border-radius: 20px 20px 0px 0px;
          .ifys {
            width: 20%;
            height: 160rpx;
            margin: 10rpx 0;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center;

            image {
              width: 96rpx !important;
              height: 96rpx !important;
              // border-radius: 16rpx;
            }

            text {
              font-size: 28rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 600;
              color: $mainText;
              line-height: 50rpx;
            }
          }
        }
      }

      // 商户列表
      .tenant {
        // width: 100%;
        // margin-bottom: 160rpx;
        padding: 0 30rpx 40rpx 30rpx;

        .scroll-view_subclass {
          overflow: hidden;
          touch-action: none;
          white-space: nowrap;

          .subclass {
            padding: 20rpx 0;

            .subclass_li {
              height: 60rpx;
              font-size: 30rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: $text;
              line-height: 60rpx;
              text-align: center;
              margin-right: 20rpx;
              display: inline-block;
              padding: 0 14rpx;
              position: relative;

              .tbs {
                width: 40rpx;
                height: 2rpx;
                //background: url('http://cdn.jxsr.com/flyxj.png') no-repeat;
                background-color: $primaryTextColor;

                background-size: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
              }
            }

            .vis_actis {
              font-size: 36rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #000;
              line-height: 60rpx;
            }
          }
        }

        ::-webkit-scrollbar {
          width: 0;
          height: 0;
          background-color: transparent;
        }

        .lists {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .list_li {
            width: 330rpx;
            // height: 500rpx;
            background: #ffffff;
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            overflow: hidden;

            .li_img {
              width: 330rpx !important;
              height: 330rpx !important;
            }

            .shop_xx {
              padding: 10rpx 20rpx;

              .name {
                width: 100%;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: $mainText;
                line-height: 40rpx;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                /*要显示的行数*/
                -webkit-box-orient: vertical;
                margin-bottom: 10rpx;
              }

              .jg {
                .sp1 {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ff0000;
                  line-height: 48rpx;

                  span {
                    font-size: 40rpx;
                    line-height: 48rpx;
                  }
                }

                .sp2 {
                  font-size: 20rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #999999;
                  line-height: 24rpx;
                  margin-left: 10rpx;
                }
              }
            }
          }
        }

        .list_bots {
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: $mainText;
          line-height: 60rpx;
          text-align: center;
        }
      }

      // 客服
      .service {
        width: 110rpx;
        height: 110rpx;
        background: #e7f9ef;
        box-shadow: 0px 0px 8rpx 0px rgba(28, 158, 96, 0.5);
        border-radius: 56rpx;
        position: fixed;
        right: 40rpx;
        bottom: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 68rpx;
          height: 56rpx;
        }
      }
    }
  }
</style>
